<template>
	<view>
		<view v-if="!graceFullLoading">
			
			<swiper v-if="showSwiper" indicator-dots="true">
				<swiper-item v-for="(item,key) in swiperItems" :key="key" @click="goNewsDetail(item.id)">
					<image :src="item.cover" />
				</swiper-item>
			</swiper>
			 
			<!-- 滚动公告 -->
			<graceSpeaker :icon="speakerIconImg" :msgs="speakerMsgs"></graceSpeaker>
			
			<!-- 推荐专题 -->
			<view class="grace-wrap">
				<view class="grace-boxes" v-for="(value,key) in topicData" :key="key" @click="goSearchList(value.name, value.searchExpression)">
					<view class="grace-boxes-img">
					<image :src="serverUrl+value.cover" mode="widthFix"></image>
					</view>
					<view class="grace-boxes-text">{{value.name}}</view>
				</view>
			</view>
			
			<view class="grace-padding" style="margin-top:-10upx;">
				
				<!-- 资源推荐 -->
				<view class="grace-title grace-nowrap grace-space-between" >
					<view class="grace-h5 grace-blod">百家访谈</view>
					<navigator class="grace-more-r" style="color:#49A761;"><text class="grace-iconfont icon-refresh"></text> 换一批</navigator>
				</view>
				<view class="grace-imgitems">
					<view class="grace-items" v-for="(value,key) in recommendData.data" :key="key" @click="goVideo()">
						<image :src="serverUrl+value.cover" mode="widthFix"></image>
						<view class="grace-imgitems-tips">
							<text>live</text>
							<view class="grace-imgitems-tips-border"></view>
						</view>
						<view class="grace-imgitems-text">
							{{value.title[0]}}
						</view>
					</view>
					
				</view>
				
				<!-- 资源推荐 -->
				<view class="grace-title grace-nowrap grace-space-between" >
					<view class="grace-h5 grace-blod">专家推荐</view>
					<navigator class="grace-more-r" style="color:#49A761;"><text class="grace-iconfont icon-refresh"></text> 换一批</navigator>
				</view>
				
				<view class="grace-tis">
					<view class="tis-li" v-for="(item, index) in ssoMember" :key="index" @click="goHomePage(item.id)">
						<view class="face">
							<image :src="serverUrl+item.avatarImg"></image>
						</view>
						<view class="info">
							<view class="name">
								<label>{{item.realName}}</label>
							</view>
							<view class="org">{{item.workUnitCurrent}}</view>
						</view>
					</view>
					
				</view>
				
				
			</view>
			
		</view>
		<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/logo.png"></graceFullLoading>
	</view>
</template>

<script>
	import graceFullLoading from "../../../graceUI/components/graceFullLoading.vue";
	import graceSwiper from "../../../graceUI/components/graceSwiper.vue";
	import graceSpeaker from "../../../graceUI/components/graceSpeaker.vue";
	var _self;
	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		computed: {
		    ...mapState(['userInfo','databaseInfo','propertyInfo'])
		},
		data() {
			return {
				showSwiper: "swiper",
				serverUrl : this.serverUrl,
				loadingImg : '/static/loading_sm.png', 
				graceFullLoading : true,
				swiperItems : [],
				speakerIconImg: '/static/speaker.png',
				speakerMsgs : [],
				topicData: [],
				recommendData: [],
				likesData: [],
				ssoMember: []
			};
		},
		onLoad:function(){
			const appKey = uni.getStorageSync('appKey');
			if(appKey!=""){
				this.findUser(appKey);
			}
			_self = this;
			//关闭loading
			setTimeout(function(){
				_self.graceFullLoading = false;
			}, 1000);
			
			this.getTopic();
			this.getSwiperItems();
			this.getNotice();
			this.getRecommendList();
			this.getDbList();
			this.getSsoMember();
		},
		components:{
			graceFullLoading,
			// graceSwiper,
			graceSpeaker
		},
		methods:{
			...mapMutations(['login','setDatabaseInfo','setPropertyInfo']),
			showLoading : function(){
				this.graceFullLoading = true;
				setTimeout(function(){_self.graceFullLoading = false;}, 2000);
			},
			findUser(appKey) {
				uni.request({
					url: this.serverUrl + 'user-api/findUser',
					data: {
						appKey: appKey,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.login(r.data.data); 
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				});
			},
			goPdf()  {
				uni.navigateTo({
					url: "/pages/general/pdf/pdf",
				})
			},
			goWebview()  {
				uni.navigateTo({
					url: "/pages/general/webview/webview",
				})
			},
			goVideo()  {
				uni.navigateTo({
					url: "/pages/general/video/video",
				})
			},
			goLive()  {
				uni.navigateTo({
					url: "/pages/general/live/live",
				})
			},
			goDetail(type,id) {
				if(type=='xwzx') {
					uni.navigateTo({
						url: "/pages/news/detail/detail?id=" + id + "&type=" + type
					})
				}else {
					uni.navigateTo({
						url: "/pages/search/detail/detail?id=" + id + "&type=" + type
					})
				}
				
			},
			goNewsDetail(id) {
				uni.navigateTo({
					url: "/pages/news/detail/detail?id=" + id
				})	
			},
			goSearchList(searchText,searchExpression)  {
				let obj = {
					searchText: searchText + "(专题库)",
					searchExpression: searchExpression
				}
				uni.navigateTo({
					url: "/pages/search/list/list?obj=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getNotice() {
				var data = {
					pageNumber: 1,
					pageSize: 3
				};
				uni.request({
					url: this.serverUrl + 'user-api/getSystemNotice',
					header: {
					  "content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							// console.log(r.data.data);
							var len = r.data.data.length;
							for (var i = 0; i < len; i++) {
								var tmpObj = {
									url: "../../news/detail/detail",
									opentype: "switchTab",
									title: r.data.data[i].title
								};
								this.speakerMsgs.push(tmpObj);
							}
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getTopic() {
				var data = {
					status: "0",
					pageNumber: 1,
					pageSize: 4
				};
				uni.request({
					url: this.serverUrl + 'search-api/getPayProduct',
					header: {
					  "content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							// console.log(r.data.data);
							this.topicData = r.data.data;
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getRecommendList() {
				var data = {
					query: "$type:bjft AND $recommend:1",
					showFields: "id;title;cover",
					pageNum: 1,
					pageSize: 4
				};
				uni.request({
					url: this.serverUrl + 'search-api/search',
					header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							// console.log(r.data.data);
							this.recommendData = r.data.data;
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getSwiperItems() {
				var data = {
					query: "$type:xwzx AND -$cover:* AND $sslm:A01",
					showFields: "id;title;cover",
					pageNum: 1,
					pageSize: 4
				};
				uni.request({
					url: this.serverUrl + 'search-api/search',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							this.swiperItems = r.data.data.data;
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getDbList() {
				var data = {
					// recommend: "1",
					pageNumber: 1,
					pageSize: 100
				};
				uni.request({
					url: this.serverUrl + 'search-api/getDatabase',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							// console.log(r.data.data);
							let databaseInfoTemp = [];
							for (var i = 0; i < r.data.data.length; i++) {
								var tmpObj = {
									key: r.data.data[i].nameEn,
									value: r.data.data[i].nameCn
								};
								databaseInfoTemp.push(tmpObj);
							}
							// console.log(databaseInfoTemp);
							//赋值全局变量
							this.setDatabaseInfo(databaseInfoTemp);
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getSsoMember() {
				var data = {
					certification: 1,
					pageNumber: 1,
					pageSize: 4
				};
				uni.request({
					url: this.serverUrl + 'user-api/getSsoMember',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r);
						if(r.data.code=='000000') {
							this.ssoMember = r.data.data;
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			goHomePage(id){
				uni.navigateTo({
					url:'/pages/my/home-page/home-page?id='+id
				})
			}
		}
	}
</script>

<style>

image,swiper,.img-view {
	width: 100%;
	height: 400upx;
}
.grace-wrap {
	margin: -10upx 0 0 0;
}
.grace-news-list-title-main {
	font-size: 30upx;
}
.grace-imgitems-text {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.grace-news-list-img{
	width:140upx; 
}
.summary-text-overflow {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.grace-tis {
	display: flex;
	flex-wrap: wrap;
}
.tis-li {
	width: 50%;
	margin: 15upx 0;
	display: flex;
	/* padding-right: 5upx; */
}
.tis-li .face {
	flex-shrink: 0;
	width: 130upx;
	height: 130upx;
}
.tis-li .face image {
	width: 100%;
	height: 100%;
	border-radius: 100%
}
.tis-li .info {
	display: flex;
	flex-flow: wrap;
	padding-left: 10upx;
}
.tis-li .info .name {
	width: 100%;
	font-size: 28upx;
	color: #000;
}
.tis-li .info .org {
	display: flex;
	color: #2F2F2F;
	font-size: 25upx;
}
		
</style>
